<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('志愿者管理详情')" />
    <style>
        /*基本信息表单布局*/
        .information
        {
            padding-top: 30px;
            display: inline;
        }
        /*服务记录、报名记录表单布局*/
        .service ,.apply
        {
            display: none;
        }
        /*设置兴趣爱好、个人简历文本框大小并换行*/
        .specialty,.synopsis
        {
            width:700px;
            display:inline-block;
            word-break:normal;
            word-wrap:break-word;
            vertical-align: top;
        }
    </style>
</head>
<body class="white-bg">
    <div class="container-div">
        <!--选择页面按钮-->
        <div class="btn-group-sm button" id="button" role="group">
            <a class="btn btn-white" onclick="showInformation()">基本信息</a>
            <a class="btn btn-white" onclick="showServiceRecord()">服务记录</a>
            <a class="btn btn-white" onclick="showApplyRecord()">报名记录</a>
        </div>
        <!--志愿者基本信息 -->
        <div class="col-sm-12 select-table information" id="information">
            <form class="container form-horizontal m" id="form-blacklist-detail" th:object="${vtspBlacklist}">
            <input name="volunteerId" th:field="*{volunteerId}" type="hidden">
            <div class="row">
                <div class="form-group col-md-4">
                    <p>志愿者编号：<span th:text="*{volunteerCode}">volunteerCode</span></p>
                </div>
                <div class="form-group col-md-4">
                    <p>姓名：<span th:text="*{volunteerName}">volunteerName</span></p>
                </div>
                <div class="form-group col-md-4">
                    <p>学历：<span th:text="${@dict.getLabel('degree',vtspBlacklist.volunteerDegree)}">volunteerDegree</span></p>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-4">
                    <p>所在部门：<span th:text="*{sectorName}">sectorName</span></p>
                </div>
                <div class="form-group col-md-4">
                    <p>性别：<span th:text="${@dict.getLabel('sys_user_sex',vtspBlacklist.sexName)}">sexName</span></p>
                </div>
                <div class="form-group col-md-4">
                    <p>学号：<span th:text="*{volunteerNo}">volunteerNo</span></p>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-4">
                    <p>职务：<span th:text="*{dutiesName}">dutiesName</span></p>
                </div>
                <div class="form-group col-md-4">
                    <p>出生日期：<span th:text="${#dates.format(vtspBlacklist.volunteerBirthday, 'yyyy-MM-dd')}">volunteerBirthday</span></p>
                </div>
                <div class="form-group col-md-4">
                    <p>级时：<span th:text="${@dict.getLabel('level',vtspBlacklist.volunteerLevel)}">volunteerLevel</span></p>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-4">
                    <p>联系电话：<span th:text="*{volunteerPhone}">volunteerPhone</span></p>
                </div>
                <div class="form-group col-md-4">
                    <p>所在地：<span th:text="*{volunteerArea}">volunteerArea</span></p>
                </div>
                <div class="form-group col-md-4">
                    <p>所在学院：<span th:text="*{volunteerAcademy}">volunteerAcademy</span></p>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-4">
                    <p>电子邮箱：<span th:text="*{volunteerEmail}">volunteerEmail</span></p>
                </div>
                <div class="form-group col-md-4">
                    <p>证件类型：<span th:text="${@dict.getLabel('certificate_type',vtspBlacklist.cardType)}">cardType</span></p>
                </div>
                <div class="form-group col-md-4">
                    <p>专业：<span th:text="*{volunteerProfession}">volunteerProfession</span></p>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-4">
                    <p>入队时间：<span th:text="${#dates.format(vtspBlacklist.volunteerDate, 'yyyy-MM-dd')}">volunteerDate</span></p>
                </div>
                <div class="form-group col-md-4">
                    <p>证件编号：<span th:text="*{cardNo}">cardNo</span></p>
                </div>
                <div class="form-group col-md-4">
                    <p>所在班级：<span th:text="*{volunteerClass}">volunteerClass</span></p>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-4">
                    <p>是否工作：<span th:text="${@dict.getLabel('is_work',vtspBlacklist.isWork)}">isWork</span></p>
                </div>
                <div class="form-group col-md-4">
                    <p>现工作单位：<span th:text="*{workPlace}">workPlace</span></p>
                </div>
                <div class="form-group col-md-4">
                    <p>工作方向：<span th:text="*{workTrend}">workTrend</span></p>
                </div>
            </div>
            <div class="row">
                <div class="form-group col-md-4">
                    <p>综合评价：</p>
                </div>
                <div class="form-group col-md-4">
                    <p>状态：<span th:text="${@dict.getLabel('member_state',vtspBlacklist.memberState)}">memberState</span></p>
                </div>
            </div>
            <div class="row form-group">
                <p>兴趣特长：<span class="specialty" th:text="*{volunteerSpecialty}">volunteerSpecialty</span></p>
            </div>
            <div class="row form-group">
                <p>个人简历：<span class="synopsis" th:text="*{volunteerSynopsis}">volunteerSynopsis</span></p>
            </div>
        </form>
        </div>
        <!--志愿者服务记录-->
        <div class="col-sm-12 select-table table-striped service" id="service">
            <table id="serve">
                <thead>
                    <tr>
                        <th data-formatter="fm_rowIndex" data-align="center">序号</th>
                        <th data-field="activityId" data-align="center">活动编号</th>
                        <th data-field="activityName" data-align="center">活动名称</th>
                        <th data-field="typeName" data-align="center">活动类型</th>
                        <th data-field="activityTime" data-align="center">活动时间</th>
                        <th data-field="postName" data-align="center">岗位名称</th>
                        <th data-field="appraiseTime" data-align="center">所获时长</th>
                        <th data-field="appraiseScore" data-align="center">活动表现</th>
                        <th data-field="appraiseContent" data-align="center">评价内容</th>
                        <th data-field="appraiseName" data-align="center">评价人</th>
                        <th data-field="appraiseDate" data-align="center">评价时间</th>
                    </tr>
                </thead>
            </table>
        </div>
        <!--志愿者报名记录-->
        <div class="col-sm-12 select-table table-striped apply" id="apply">
            <table id="enroll">
                <thead>
                    <tr>
                        <th data-formatter="fm_rowIndex" data-align="center">序号</th>
                        <th data-field="activityId" data-align="center">活动编号</th>
                        <th data-field="activityName" data-align="center">活动名称</th>
                        <th data-field="typeName" data-align="center">活动类型</th>
                        <th data-field="activityArea" data-align="center">活动区域</th>
                        <th data-field="activityTime" data-align="center">活动时间</th>
                        <th data-field="postName" data-align="center">岗位名称</th>
                        <th data-field="enrollTime" data-align="center">报名时间</th>
                        <th data-field="enrollState" data-align="center" data-formatter="fm_state">状态</th>
                        <th data-field="auditName" data-align="center">审核人</th>
                        <th data-field="auditTime" data-align="center">审核时间</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "vtsp/blacklist";                    //志愿者黑名单
        var stateData = [[${@dict.getType('member_state')}]];   //获取字典中的数据：状态
        var volunteerId = [[${volunteerId}]];

        //初始化表格参数
        $(function()
        {
            //服务记录表格
            var options1 =
                {
                    id: "serve",
                    url: prefix + "/detail/" + volunteerId + "/serve",   //详情
                };
            //报名记录表格
            var options2 =
                {
                    id: "enroll",
                    url: prefix + "/detail/" + volunteerId + "/enroll",   //详情
                };
            $.table.init(options1);
            $.table.init(options2);
        });

        //格式化数据字典：状态
        function fm_state(value, row ,index)
        {
            return $.table.selectDictLabel(stateData, value);
        }

        /*通过功能按钮：基本信息、服务记录和报名记录，获取点击事件*/
        //显示基本信息界面
        function showInformation()
        {
            //获取Id
            var information = document.getElementById("information");
            var service = document.getElementById("service");
            var apply = document.getElementById("apply");
            //修改display属性
            button.style.display = "inline";
            information.style.display = "inline";
            service.style.display = "none";
            apply.style.display = "none";
        }
        //显示服务记录界面
        function showServiceRecord()
        {
            //获取Id
            var information = document.getElementById("information");
            var service = document.getElementById("service");
            var apply = document.getElementById("apply");
            //修改display属性
            button.style.display = "inline";
            information.style.display = "none";
            service.style.display = "inline";
            apply.style.display = "none";
        }
        //显示报名记录界面
        function showApplyRecord()
        {
            //获取Id
            var information = document.getElementById("information");
            var service = document.getElementById("service");
            var apply = document.getElementById("apply");
            //修改display属性
            button.style.display = "inline";
            information.style.display = "none";
            service.style.display = "none";
            apply.style.display = "inline";
        }
    </script>
</body>
</html>